<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="logo">
          <image src="/static/logo.png" mode="aspectFill" style="height: 60rpx;width:50rpx;"></image>
      </view>
      <view class="nav-items">
        <text>首页</text>
        <text>话题集团</text>
        <text>加盟合作</text>
        <text>加入我们</text>
        <text>客户服务</text>
      </view>
    </view>

    <!-- 视频区域 -->
    <view class="video-container" @touchstart="handleInteraction" @click="handleInteraction">
      <video 
        id="myVideo"
        video-id="myVideo"
        :src="videoSrc"
        :autoplay="true"
        :loop="true"
        :controls="false"
        :show-play-btn="false"
        :show-center-play-btn="false"
        :poster="posterUrl"
        :object-fit="'cover'"
        :muted="true"
        :initial-time="0"
        :enable-progress-gesture="false"
        @ended="onVideoEnd"
        @error="handleVideoError"
        @play="handlePlay"
        @pause="handlePause"
        @waiting="handleWaiting"
        @timeupdate="handleTimeUpdate"
        ref="videoRef"
        class="full-video"
        :style="{ opacity: isVideoLoaded ? 1 : 0 }"
      ></video>
      
      <!-- 播放按钮 -->
      <view 
        v-if="showPlayButton" 
        class="play-btn"
        @click.stop="attemptAutoPlay"
      >
        <view class="play-icon"></view>
      </view>
      
      <!-- 自定义控制按钮 -->
      <view v-if="isPlaying" class="video-controls">
        <view class="scroll-hint">
          向下滑动
          <view class="arrow-down"></view>
        </view>
        <view class="control-btns">
          <view class="control-btn" @click.stop="togglePlay">
            <text class="iconfont" :class="isPlaying ? 'icon-pause' : 'icon-play'"></text>
          </view>
          <view class="control-btn" @click.stop="toggleMute">
            <text class="iconfont" :class="isMuted ? 'icon-mute' : 'icon-volume'"></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 品牌展示区域 -->
    <view class="brand-showcase">
      <view class="brand-header">
        <text class="brand-title">话题旗下</text>
        <view class="brand-stats">
          <text class="stat-item">31个品牌</text>
          <text class="stat-item">10000+酒店</text>
          <text class="stat-item">1000+城市</text>
        </view>
        <text class="update-time">数据截至2024年3月</text>
        <text class="view-more">点击酒店图片，了解更多</text>
      </view>

      <!-- 酒店品牌轮播 -->
      <swiper class="brand-swiper" 
              :indicator-dots="true" 
              :autoplay="true" 
              :interval="3000"
              :duration="500"
              :circular="true"
              @change="handleSwiperChange">
        <!-- 施柏阁 -->
        <swiper-item>
          <view class="brand-item" @click="handleBrandClick('spg')">
            <image class="brand-image" src="/static/htja.jpg" mode="aspectFill"/>
            <view class="brand-info">
              <text class="brand-name">话题江岸店</text>
              <text class="brand-desc">匠心所成 达享所愿</text>
            </view>
          </view>
        </swiper-item>

        <!-- CitiGO -->
        <swiper-item>
          <view class="brand-item" @click="handleBrandClick('citigo')">
            <image class="brand-image" src="/static/htyl.png" mode="aspectFill"/>
            <view class="brand-info">
              <text class="brand-name">话题杨林店</text>
              <text class="brand-desc">有趣的人都住话题杨林店</text>
            </view>
          </view>
        </swiper-item>

        <!-- 美居 -->
        <swiper-item>
          <view class="brand-item" @click="handleBrandClick('mercure')">
            <image class="brand-image" src="/static/htms.jpg" mode="aspectFill"/>
            <view class="brand-info">
              <text class="brand-name">话题民宿</text>
              <text class="brand-desc">亲近居住 至臻体验</text>
            </view>
          </view>
        </swiper-item>

        <!-- 城际 -->
        <swiper-item>
          <view class="brand-item" @click="handleBrandClick('city')">
            <image class="brand-image" src="/static/htbn.jpg" mode="aspectFill"/>
            <view class="brand-info">
              <text class="brand-name">话题版纳店</text>
              <text class="brand-desc">清新自在</text>
            </view>
          </view>
        </swiper-item>

      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '/static/20240918095606hinigyi418uuu96.mp4',
      posterUrl: '/static/logo.png',
      isPlaying: false,
      isMuted: true,
      showPlayButton: true,
      isVideoLoaded: false,
      hasInteracted: false,
      currentSwiperIndex: 0,
      brands: [
        { id: 'spg', name: '施柏阁', desc: '匠心所成 达享所愿' },
        { id: 'citigo', name: 'CitiGO', desc: '有趣的人都住CitiGO' },
        { id: 'mercure', name: '美居', desc: '法式居停 至臻体验' },
        { id: 'city', name: '城际', desc: '畅由造' },
        { id: 'ibis', name: '宜必思', desc: 'WE ARE OPEN 欢开心来' }
      ]
    }
  },
  // #ifdef H5
  mounted() {
    this.initVideoPlayer();
    document.addEventListener('visibilitychange', this.handleVisibilityChange);
    if (typeof WeixinJSBridge !== 'undefined') {
      this.attemptAutoPlay();
    } else {
      document.addEventListener('WeixinJSBridgeReady', this.attemptAutoPlay);
    }
    
    // 添加滚动监听
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    document.removeEventListener('visibilitychange', this.handleVisibilityChange);
    document.removeEventListener('WeixinJSBridgeReady', this.attemptAutoPlay);
    window.removeEventListener('scroll', this.handleScroll);
  },
  // #endif
  methods: {
    initVideoPlayer() {
      uni.getNetworkType({
        success: (res) => {
          if (res.networkType !== 'none') {
            this.$nextTick(() => {
              this.attemptAutoPlay();
            });
          }
        }
      });
    },
    
    handleInteraction() {
      if (!this.hasInteracted) {
        this.hasInteracted = true;
        this.attemptAutoPlay();
      }
    },

    attemptAutoPlay() {
      try {
        const videoContext = uni.createVideoContext('myVideo', this);
        if (!videoContext) return;
        this.isMuted = true;
        videoContext.muted(true);
        videoContext.play();
        this.isPlaying = true;
        this.showPlayButton = false;
        this.isVideoLoaded = true;
      } catch (err) {
        console.error('自动播放失败:', err);
        this.showPlayButton = true;
        this.isPlaying = false;
      }
    },

    handlePlay() {
      this.isPlaying = true;
      this.showPlayButton = false;
    },

    handlePause() {
      this.isPlaying = false;
      this.showPlayButton = true;
    },

    handleVideoError(error) {
      console.error('视频错误:', error);
      this.showPlayButton = true;
      this.isPlaying = false;
    },

    togglePlay() {
      const videoContext = uni.createVideoContext('myVideo', this);
      if (!videoContext) return;

      if (this.isPlaying) {
        videoContext.pause();
        this.isPlaying = false;
        this.showPlayButton = true;
      } else {
        videoContext.play();
        this.isPlaying = true;
        this.showPlayButton = false;
      }
    },

    toggleMute() {
      const videoContext = uni.createVideoContext('myVideo', this);
      if (!videoContext) return;
      
      this.isMuted = !this.isMuted;
      videoContext.muted(this.isMuted);
    },

    handleVisibilityChange() {
      const video = this.$refs.videoRef;
      if (!video) return;

      if (document.hidden) {
        video.pause();
      } else if (this.isPlaying) {
        this.attemptAutoPlay();
      }
    },

    handleWaiting() {
      console.log('视频缓冲中...');
    },

    handleTimeUpdate(e) {
      if (!this.isVideoLoaded && e.detail.currentTime > 0) {
        this.isVideoLoaded = true;
      }
    },

    onVideoEnd() {
      const video = this.$refs.videoRef;
      if (video && this.isPlaying) {
        const videoContext = uni.createVideoContext('myVideo', this);
        videoContext.play();
      }
    },

    handleScroll() {
      // 处理滚动事件，可以添加视差效果或其他滚动相关的功能
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      if (scrollTop > 50) {
        // 当页面滚动超过50px时，可以添加导航栏样式变化等效果
      }
    },

    handleSwiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
    },

    handleBrandClick(brandId) {
      // 处理品牌点击事件，可以跳转到相应的品牌详情页
      console.log('点击了品牌:', brandId);
      uni.navigateTo({
        url: `/pages/brand/detail?id=${brandId}`
      });
    }
  }
}
</script>

<style lang="scss">
.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 100;
  backdrop-filter: blur(10px);
  transition: background-color 0.3s ease;

  .logo {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    
    image {
      height: 30px;
      width: 25px;
    }
  }

  .nav-items {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 20px;
    
    text {
      font-size: 14px;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 4px;
      transition: all 0.3s ease;
      
      &:hover {
        color: #007AFF;
        background: rgba(0, 122, 255, 0.1);
      }
    }
  }
}

.video-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #000;
  
  .full-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
  }
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  
  .play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 30px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 8px;
    transition: transform 0.3s ease;
  }
  
  &:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
    
    .play-icon {
      transform: scale(1.1);
    }
  }
}

.video-controls {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  
  .scroll-hint {
    color: #fff;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    
    &:hover {
      opacity: 1;
    }
    
    .arrow-down {
      width: 20px;
      height: 20px;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(-45deg);
      margin: 10px auto;
      animation: bounce 2s infinite;
    }
  }
  
  .control-btns {
    position: absolute;
    right: 30px;
    display: flex;
    gap: 10px;
    
    .control-btn {
      width: 40px;
      height: 40px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      
      .iconfont {
        color: #fff;
        font-size: 20px;
        transition: transform 0.3s ease;
      }
      
      &:hover {
        background: rgba(0, 0, 0, 0.7);
        transform: scale(1.1);
        
        .iconfont {
          transform: scale(1.1);
        }
      }
    }
  }
}

// 品牌展示区域样式
.brand-showcase {
  padding: 80px 20px;
  background: #fff;
  position: relative;
  z-index: 1;

  .brand-header {
    text-align: center;
    margin-bottom: 60px;

    .brand-title {
      font-size: 36px;
      color: #333;
      font-weight: bold;
      margin-bottom: 30px;
      position: relative;
      display: inline-block;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 3px;
        background: #007AFF;
        border-radius: 2px;
      }
    }

    .brand-stats {
      display: flex;
      justify-content: center;
      gap: 60px;
      margin: 40px 0;

      .stat-item {
        font-size: 24px;
        color: #666;
        position: relative;
        
        &:not(:last-child)::after {
          content: '';
          position: absolute;
          right: -30px;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 20px;
          background: #ddd;
        }
      }
    }

    .update-time {
      display: block;
      color: #999;
      font-size: 14px;
      margin: 15px 0;
    }

    .view-more {
      display: block;
      color: #666;
      font-size: 16px;
      margin-top: 20px;
      position: relative;
      padding-bottom: 30px;
      cursor: pointer;
      transition: color 0.3s ease;

      &:hover {
        color: #007AFF;
      }

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%) rotate(-45deg);
        width: 12px;
        height: 12px;
        border-left: 2px solid #666;
        border-bottom: 2px solid #666;
        transition: border-color 0.3s ease;
      }
      
      &:hover::after {
        border-color: #007AFF;
      }
    }
  }

  .brand-swiper {
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    
    .brand-item {
      position: relative;
      width: 100%;
      height: 100%;
      cursor: pointer;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
        z-index: 1;
      }
      
      .brand-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
      }
      
      &:hover .brand-image {
        transform: scale(1.05);
      }
      
      .brand-info {
        position: absolute;
        bottom: 40px;
        left: 40px;
        color: #fff;
        z-index: 2;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        
        .brand-name {
          display: block;
          font-size: 32px;
          font-weight: bold;
          margin-bottom: 10px;
          transform: translateY(20px);
          opacity: 0;
          transition: all 0.4s ease;
        }
        
        .brand-desc {
          display: block;
          font-size: 18px;
          transform: translateY(20px);
          opacity: 0;
          transition: all 0.4s ease 0.1s;
        }
      }
      
      &:hover {
        .brand-name,
        .brand-desc {
          transform: translateY(0);
          opacity: 1;
        }
      }
    }
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) rotate(-45deg);
  }
  40% {
    transform: translateY(-10px) rotate(-45deg);
  }
  60% {
    transform: translateY(-5px) rotate(-45deg);
  }
}

// H5端特殊样式
/* #ifdef H5 */
.video-container {
  video::-webkit-media-controls {
    display: none !important;
  }
}

// 自定义滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
  
  &:hover {
	  
    background: #666;
  }
}
/* #endif */

// 响应式适配
@media screen and (max-width: 768px) {
  .nav-bar {
    .nav-items {
      display: none;
    }
  }
  
  .brand-showcase {
    padding: 40px 15px;
    
    .brand-header {
      .brand-title {
        font-size: 28px;
      }
      
      .brand-stats {
        gap: 30px;
        
        .stat-item {
          font-size: 18px;
        }
      }
    }
    
    .brand-swiper {
      height: 400px;
      
      .brand-item {
        .brand-info {
          bottom: 20px;
          left: 20px;
          
          .brand-name {
            font-size: 24px;
          }
          
          .brand-desc {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>